<template>
	<view class="order-step-class">
		<view class="order-step-ul">
			<view v-for="(item, index) in steps" :key="index" class="order-step-li"
				:class="{ 'step-active': index <= current }">
				<!-- 步骤点 -->
				<view class="step-polygon">
					<view class="step-ctpoint">
						<!-- 普通点 -->
						<view v-if="index != current" class="step-point"></view>
						<!-- 进行中点 -->
						<view v-else class="step-inprogress">
							<u-icon name="more-dot-fill" size="24"></u-icon>
						</view>
					</view>
					<view class="step-line" :class="{ 'step-line-active': index < current }"></view>
				</view>
				<!-- 步骤名称 -->
				<view class="step-label">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {
			current: {
				type: Number | String,
				default: 0,
			},
			steps: {
				type: Array,
				default: () => [],
			},
		},
	};
</script>

<style lang="scss" scoped>
	.order-step-class {
		.order-step-ul {
			display: flex;
			// align-items: center;
			justify-content: space-between;

			.order-step-li {
				flex: 1;

				&:last-child {
					background-color: transparent;

					.step-line {
						display: none !important;
					}
				}

				.step-polygon {
					height: 54rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					.step-ctpoint {
						background-color: #fff;
						padding: 0 24rpx;
						z-index: 1;

						.step-point {
							width: 20rpx;
							height: 20rpx;
							background-color: rgb(181, 183, 186);
							border-radius: 50%;
						}

						.step-inprogress {
							display: flex;
							justify-content: center;
							align-items: center;
							line-height: 1;
							color: rgb(66, 143, 252);
							border: 1rpx solid rgb(66, 143, 252);
							border-radius: 50%;
							padding: 2rpx;
						}
					}

					.step-line {
						position: absolute;
						left: 50%;
						top: 50%;
						height: 1px;
						background-color: rgb(181, 183, 186);
						width: 100%;
						transform: translateY(-1px);
					}

					.step-line-active {
						background-color: rgb(66, 143, 252);
					}
				}

				.step-label {
					color: rgb(181, 183, 186);
					text-align: center;
					font-size: 22rpx;
				}
			}

			.step-active {
				.step-polygon {
					.step-ctpoint {
						.step-point {
							background-color: rgb(66, 143, 252);
						}
					}
				}

				.step-label {
					color: rgb(66, 143, 252);
				}
			}
		}
	}
</style>
